<!DOCTYPE html>
<html>
<head>
    <title>Images</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    

        <div id="example" class="k-content">
            <div class="treeview-back">
            <h3>TreeView with images</h3>

            <div id="treeview-images"></div>
            </div>

            <script>
                $("#treeview-images").kendoTreeView({
                    dataSource: [
                        {
                            text: "Inbox", imageUrl: "../../content/web/treeview/mail.png",
                            items: [
                                { text: "Read Mail", imageUrl: "../../content/web/treeview/readmail.png" }
                            ]
                        },
                        {
                            text: "Drafts", imageUrl: "../../content/web/treeview/edit.png"
                        },
                        {
                            text: "Search Folders", expanded: true, imageUrl: "../../content/web/treeview/search.png",
                            items: [
                                { text: "Categorized Mail", imageUrl: "../../content/web/treeview/search.png" },
                                { text: "Large Mail", imageUrl: "../../content/web/treeview/search.png" },
                                { text: "Unread Mail", imageUrl: "../../content/web/treeview/search.png" }
                            ]
                        },
                        {
                            text: "Settings", imageUrl: "../../content/web/treeview/settings.png"
                        }
                    ]
                });
            </script>
            <div class="treeview-back">
            <h3>TreeView with sprites</h3>

            <div id="treeview-sprites"></div>
            </div>
            <script>
                $("#treeview-sprites").kendoTreeView({
                    dataSource: [{
                        text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                            {
                                text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                    { text: "about.html", spriteCssClass: "html" },
                                    { text: "index.html", spriteCssClass: "html" },
                                    { text: "logo.png", spriteCssClass: "image" }
                                ]
                            },
                            {
                                text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                    { text: "mockup.jpg", spriteCssClass: "image" },
                                    { text: "Research.pdf", spriteCssClass: "pdf" },
                                ]
                            },
                            {
                                text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                    { text: "February.pdf", spriteCssClass: "pdf" },
                                    { text: "March.pdf", spriteCssClass: "pdf" },
                                    { text: "April.pdf", spriteCssClass: "pdf" }
                                ]
                            }
                        ]
                    }]
                });
            </script>

            <style scoped>
                #treeview-sprites .k-sprite {
                    background-image: url("../../content/web/treeview/coloricons-sprite.png");
                }
                .rootfolder 
                {
                    background-position: 0 0;	
                }
                .folder 
                {
                    background-position: 0 -16px;	
                }
                .pdf 
                {
                    background-position: 0 -32px;	
                }
                .html 
                {
                    background-position: 0 -48px;	
                }
                .image 
                {
                    background-position: 0 -64px;	
                }
                .treeview-back 
                {
                	float: left;
                	width: 200px;
                	margin: 30px;
                	padding: 20px;
                	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                    box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                }
                .treeview-back h3
                {
                	margin: 0 0 10px 0;
                	padding: 0;
                }
            </style>
        </div>

</body>
</html>
